{% extends 'article.html' %}
{% block css %}
    <style>
    .article {
        margin-top: 20px;
        width: 500px;
    }
    .article>.title{
        text-align: center;
    }
    .article>div{
        margin-bottom: 10px;
    }
    .article > .el-button{
        width: 100%;
    }
    </style>
{% endblock %}

{% block main %}

    <div class="slider_bar" ref="slider" style="display: none">
        <div class="title">
            <span>[[ slide_text ]]</span>
            <el-switch
                    v-model="is_show"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="slider_change"
            >
            </el-switch>
        </div>
        <div class="body">
            <el-scrollbar>
                <p v-for="(item, index) in slide_list" :key="index" :tagName="item.tagName"
                   @click="go_side_bar(item.pos,$event)">
                    [[ item.c]]
                </p>
            </el-scrollbar>
        </div>
    </div>


    <div class="article">
        <div class="title">请输入密码</div>
        <el-input
                id="article_pwd"
                placeholder="请输入文章密码"
                v-model="article_pwd"
        ></el-input>
        <el-button
                type="primary"
                @click="article_pwd_show('{{ article.nid }}')"
        >查看
        </el-button>
    </div>


{% endblock %}




{% block article_js %}
    <script>
        setTimeout(() => {
            $('.slider_bar').remove()
        }, 500)
    </script>
{% endblock %}

